<template>
  <section>
     <!-- 头部区域 -->
    <div class="tabBar">
        <div v-for="(item, index) in navLists"
        :key="index" class="boxNoClick" :class="{boxClick:changeStyle == index}" @click="isShow(index)">{{item.text}}</div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="current" v-for="item in list" :key="item.id" @click="jump(item.id)">
        <div class="img-box">
          <img :src="'/api/file/' + item.activityPicture" alt="" />
        </div>

        <div class="date">
          <span>活动时间</span>
          <p>{{item.startTime}}-{{item.endTime}}</p>
        </div>

        <div class="info">
          <p>
            <span>{{item.title}}</span>
            <i>已报名</i>
          </p>
          <div style="font-size: 14px">{{item.introduce}}</div>
        </div>
      </div>
    </van-list>

      <!-- <van-tab title="我参与的">
        <ul>
          <li>
            <div class="img">
              <img src="@/mobile/imgs/activity.jpg" alt="" />
              <span>已参与</span>
            </div>
            <div class="info">
              <span>文体活动</span>
              <p>省委组织部2020年干 部专题研修班在我校 开班</p>
              <i>2020-12-01</i>
            </div>
          </li>
          <li>
            <div class="img">
              <img src="@/mobile/imgs/activity.jpg" alt="" />
              <span>已参与</span>
            </div>
            <div class="info">
              <span>文体活动</span>
              <p>省委组织部2020年干 部专题研修班在我校 开班</p>
              <i>2020-12-01</i>
            </div>
          </li>
        </ul>
      </van-tab> -->

    <tabbar :index="index" />
  </section>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import tabbar from "../../components/tabbar.vue";
import api from "../../data/api/index"
Vue.use(Tab);
Vue.use(Tabs);

export default {
  components: { tabbar },
  data() {
    return {
      navLists:[
        {
          "text":"当前报名"
        },
        // {
        //   "text":"我参与的"
        // }
      ],
      active: 0,
      index: 2,
      list:[],
      loading: false,
      finished: false,
      count: 0,
      listQ:{
        page: 1,
        rows: 10
      },
      changeStyle: 0
    };
  },
  methods: {
     async onLoad() {
      await this.getList()
      // 加载状态结束
      this.loading = false;
      // 数据全部加载完成
      if (this.list.length >= this.count) {
        this.finished = true;
      }
    },
    isShow(index) {
      this.listQ.page = 1
      this.list = []
      this.changeStyle = index
      this.onLoad()
    },
    getList(){
      if (this.active == 0) {
        return new Promise((resolve, reject)=>{
          api.myActivity(this.listQ).then(res=>{
            if(res.data.length > 0){
              res.data.forEach(item => {
                item.startTime = item.startTime.substring(0, 16);
                item.endTime = item.endTime.substring(0, 16);
              });
              this.list.push(...res.data)
              this.listQ.page++
            }
            this.count = res.count
            resolve(res.data)
          }).catch(error => {
            reject(error);
          });
        })
      }
    },
    jump(id){
      this.$troute.query('myDetail', {id:id});
    }
  },
};
</script>

<style lang="scss" scoped>
section {
  padding: 50px 15px 0;
  .current {
    margin: 25px 0;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #f2f2f2, -2px -2px 2px #f2f2f2;
    overflow: hidden;
    .img-box{
      height: 150px;
      overflow: hidden;
      img {
      width: 100%;
    }
    }
    .date {
      width: 72%;
      padding: 10px 15px;
      color: #fff;
      background: #fd784e;
      border-radius: 0 30px 30px 0;
      // transform: translateY(-50%);
      position: relative;
      top: -30px;
      p {
        font-size: 14px;
      }
    }
    .info {
      padding: 15px 15px 20px;
      p {
        color: #fd784e;
        font-size: 15px;
        margin: -30px 0 10px;
        span {
          position: relative;
          padding-left: 15px;
          &::before {
            content: "";
            position: absolute;
            top: 5px;
            left: 0;
            width: 10px;
            height: 10px;
            background: #fd784e;
            border-radius: 50%;
          }
        }
        i {
          float: right;
          font-style: normal;
        }
      }
      h3 {
        font-size: 17px;
        font-weight: normal;
      }
    }
  }
  ul {
    margin-top: 25px;
    li {
      margin-bottom: 35px;
      .img {
        float: left;
        width: 150px;
        position: relative;
        height: 110px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        span {
          position: absolute;
          left: 50%;
          bottom: 0;
          padding: 5px 0;
          width: 60%;
          color: #fff;
          text-align: center;
          background: #787878;
          border-radius: 25px;
          transform: translate(-50%, 50%);
        }
      }
      .info {
        margin-left: 165px;
        span {
          position: relative;
          padding-left: 15px;
          font-size: 15px;
          &::before {
            content: "";
            position: absolute;
            top: 5px;
            left: 0;
            width: 10px;
            height: 10px;
            background: #fd784e;
            border-radius: 50%;
          }
        }
        p {
          height: 60px;
          line-height: 20px;
          overflow: hidden;
          margin: 5px 0;
          font-size: 16px;
        }
        i {
          color: #666;
          font-style: normal;
        }
      }
    }
  }
}
.van-tab--active {
  font-size: 16px !important;
}
.tabBar{
    width: 100%;
    height: 40px;
    display: flex;
    .boxClick{
      width: 80px;
      height: 100%;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 4px solid rgb(201,21,30);
    }
    .boxNoClick{
      width: 80px;
      height: 100%;
      font-size: 20px;
      margin-left: 20px;
      text-align: center;
    }
  }
</style>
